<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<link rel="shortcut icon" href="${ctxPath}/static/image/favicon.ico" type="image/x-icon" />
<title>柒色都吧问卷-结果统计</title>
<!-- Bootstrap 核心 CSS 文件 -->
<link href="${ctxPath}/static/bootstrop/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="${ctxPath}/static/js/jquery.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="${ctxPath}/static/bootstrop/js/bootstrap.min.js"></script>
<!-- 自定义样式 -->
<link  href="${ctxPath}/static/css/7dub_diy.css" rel="stylesheet">
</head>
<body style="background: #FFFFFF;">
<!-- main start -->
<div style="width:900px;margin:0 auto;">
	<div class="surveyhead">${survey.title}
		<p style="color:#ccc;font-size:12px;">单个选项统计结果</p>
	</div>
	<div>${survey.sdesc}</div>
	<div style="margin:10px auto 10px auto;border-bottom: 1px dashed #ccc;text-align: right;">
		<button type="button" class="btn btn-default btn-xs" onclick="showAndHide('echartBox','allSummaryBox')">选项统计</button>
	　　<button type="button" class="btn btn-default btn-xs" onclick="showAndHide('allSummaryBox','echartBox')">默认报告</button>
	</div>
	<div id="echartBox">
		<!-- 遍历创建图表容器 start -->
		<% for(que in quelist){ size = que.options.~size;%>
			<div id="${que.id}" style="height:<%if(size<4){%>160<%}else{%>250<%}%>px;"></div>
		<% }elsefor{ %>
			还没有题目无法统计......
		<% } %>
		<!-- 遍历创建图表容器 end -->
	</div>
	
	<div id="allSummaryBox" style="display: none;">
		<!-- 遍历创建图表容器 start -->
		<% for(que in quelist){ %>
		<div>第${queLP.index}题：${que.head}</div>
			<table class="table table-bordered">
	 			<tr class="active">
	 				<th>选项</th>
	 				<th width="50">小计</th>
	 				<th width="400">比例</th>
	 			</tr>
	 			<% for(option in que.options){
	 			par = 0;
	 			if(survey.usehits > 0){
	 			 par = option.useNum/survey.usehits; 
	 			 }
	 			%>
	 			<tr>
	 				<td>${option.content}</td>
	 				<td>${option.useNum}</td>
	 				<td>
		 				<div class="progress" style="margin-bottom:0;background-color:#ccc;">
						  <div class="progress-bar progress-bar-success"  aria-valuemin="0" aria-valuemax="100" style="width: ${par,numberFormat="#.##%"}%">
						    ${par,numberFormat="#.##%"}
						  </div>
						</div>
	 				</td>
	 			</tr>
	 			<% } %>
	 			<tr>
	 				<th>本次有效填写次数</th>
	 				<th>${survey.usehits}</th>
	 				<th></th>
	 			</tr>
			</table>
		<% }elsefor{ %>
			还没有题目无法统计......
		<% } %>
		<!-- 遍历创建图表容器 end -->
	</div>
</div>
<div style="text-align:center;margin-top:10px;"><i class="glyphicon glyphicon-education"></i>　柒色都吧问卷网　强力驱动</div>
<!-- main end -->

<!-- echart核心文件 -->
<script src="${ctxPath}/static/echarts-2.2.2/build/dist/echarts.js"></script>
<script type="text/javascript">
		var optionABC = ['A','B','C','D','E','F']; // 选项对应数组
        // 路径配置
        require.config({
            paths: {
                echarts: '${ctxPath}/static/echarts-2.2.2/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' ,// 使用柱状图就加载bar模块，按需加载
                'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                /* 遍历填充图表容器内容 start */
                
                <% for(que in quelist){ %>
                // 基于准备好的dom，初始化echarts图表
                var chart_${que.id} = ec.init(document.getElementById('${que.id}'),'macarons'); 
                
                var option_${que.id} = {
                        title : {
                            text: '题目${queLP.index}',
                            subtext:'${que.head}'
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType: {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'value',
                                boundaryGap : [0, 0.01]
                            }
                        ],
                        yAxis : [
                            {
                                type : 'category',
                                data : [
									<% for(usenum in que.options){%>
										<% if(usenumLP.last){%>
											'选项' + optionABC[${usenum.orderNum}]
										<%}else{%>
											'选项' + optionABC[${usenum.orderNum}],
									<%}}%>
									]
                            }
                        ],
                        series : [
                            {
                                
                                type:'bar',
                                data:[
										<% for(usenum in que.options){%>
										<% if(usenumLP.last){%>
											${usenum.useNum}
										<%}else{%>
											${usenum.useNum},
										<%}}%>
									 ]
                            }
                        ]
                    };
        
                // 为echarts对象加载数据 
                chart_${que.id}.setOption(option_${que.id}); 
                
                <% } %>
                /* 遍历填充图表容器内容 end */
            }
        );
        
        
 function showAndHide(show,hidden){
     $("#"+hidden).slideUp("slow");
     $("#"+show).slideDown("slow");
 }
</script>

</body>
</html>